<template>
	<view>
		<view class="allView" style="">
			<view class="" style="display: flex;flex-wrap: wrap;width: 200upx;background-color: rgb(247, 248, 250);">
				<view class="" v-for="(item,index) in RoomData" >
					<view v-if="isRoomIndex==index" class="titleView" style="background-color: white;">
						{{item.houseName}}
					</view>
					<view v-else class="titleView"  @click="qiehuansptitle(item.id,index)">
						{{item.houseName}}
					</view>
				</view>
			</view>
			
			
		<!-- 	<radio-group @change="radioChangeFA">
				<view class="" v-for="(item,index) in fanganshuju">
					
					<view class="fanganview" >
						<view class="">
							<radio :value="index"  :checked="index === current"  color="rgb(25,137,250)"/>
							{{item.pgeName}}
						</view>
						<uni-icons type="compose" size="24"></uni-icons>
						
						
					</view>
				</view>
			</radio-group>
			 -->
			<scroll-view style="height: 70vh;" scroll-y="true" >
				<view class="" style="display: flex;flex-wrap: wrap;width: 700upx;">
					<radio-group @change="radioChangeFA">
						<view class=""  v-for="(item,index) in HouseData" >
							<view class="" style="display: flex;align-items: center;margin:0 30upx ;padding: 10upx 0upx;border-bottom: 2upx solid #eee;">
								<view class="" >
									<img :src="item.imgUrl" style="width: 100upx;height: 100upx;" alt="" />
								</view>
								<view class="" style="margin-left: 10upx;width: 330upx;font-size: 26upx;line-height: 30upx;">
									<view class="" style="color:#070707;height: 44upx;">
										{{item.houseName}}
									</view>
									<view class="" style="display: flex;flex-wrap: wrap;width: 300upx;" >
										<view v-for="(item,inde) in item.rooms" style="margin-right: 20upx;">
											
											{{item.roomName}}
										</view>
										
									</view>
									
								</view>
								<radio :value="index"  :checked="index === current"  color="rgb(25,137,250)"/>
							</view>
							
							
						</view>
					</radio-group>
				</view>
				
			</scroll-view>
		</view>
		<view class="" style="margin-top:30upx;">
			<view class="" style="font-weight: bold;">
				户型展示
			</view>
			<view class="" style="width: auto;display: flex;align-items: center;justify-content: center;">
				<img v-model="widthFix" :src="zhanshiImg" alt="" style="width: 600upx;margin-bottom: 140upx;"/>
			</view>
		</view>
		
		
		
		<view class="quedingView">
			<view class="btnView" @click="tuichuBTM">
				退出
			</view>
			<view class="btnView" @click="quedingBTM">
				确定
			</view>
		</view>
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				RoomData:"",
				isRoomIndex:1,
				HouseData:"",
				HouseDataIndex:0,
				zhanshiImg:"https://zntg.swehszn.com/file/78216282-7d16-4927-b6ec-8d7085474ea2.png",
				current:0,
				
			};
		},
		onLoad(options) {
				this.getRoomTypeAllFC()
			
		},
			
		methods:{
			// 根据服务id获取其下的产品分类
			getRoomTypeAllFC: async function(){
				const getRoomTypeAll = await this.$ajax.getRoomTypeAll({
					pageNum: 1,
					pageSize: 10
				})
				this.RoomData=getRoomTypeAll.data.data
				this.getHouseTypeFC(this.RoomData[this.isRoomIndex].id)
				console.log("getRoomTypeAll",this.RoomData)
				
			
			},
			getHouseTypeFC: async function(id){
				const getHouseType = await this.$ajax.getHouseType({
					id:id
				})
				// this.shanpingtitleData=getHouseType.data.data
				console.log("getHouseType",getHouseType.data.data)
				this.HouseData=getHouseType.data.data
				
				// this.getHouseType
			
			},
			qiehuansptitle(id,index){
				this.isRoomIndex=index
				this.getHouseTypeFC(id)
			},
			radioChangeFA(e){
				this.HouseDataIndex=e.detail.value
				this.zhanshiImg=this.HouseData[this.HouseDataIndex].imgUrl?this.HouseData[this.HouseDataIndex].imgUrl:this.zhanshiImg
				// console.log(e.detail.value)
			},
			tuichuBTM(){
				uni.showToast({
					title: '请选择自定义户型',
					icon:"none",
					duration: 1000
				});
			},
			quedingBTM(){
				var that=this
				uni.showModal({
					content: '确定要选择此户型？',
					success: function (res) {
						if (res.confirm) {
							const pages = getCurrentPages()//获取所有实例
							const previousPageS = pages[pages.length-2]//当前页面的上一个页面
							previousPageS.$vm.morenhuxingData=that.HouseData[that.HouseDataIndex]
							uni.navigateBack({
								delta: 1,
								
							});
						} else if (res.cancel) {
							uni.showToast({
								title: '请选择自定义户型',
								icon:"none",
								duration: 1000
							});
						}
					}
				});
			}
			
			
		}
	}
</script>

<style>
	.allView{
		display: flex;
		align-items: flex-start;
		width: 690upx;
		padding: 0upx 30upx 0upx 0upx;
	}
	.titleView{
		width: 200upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: white; */
	}
	.shuliangView{
		background-color: rgb(242, 243, 245);
		padding: 0 10upx;
		margin: 0 5upx;
	}
	
	.hejiView{
		position: fixed;
		width: 690upx;
		bottom:0upx;
		height: 100upx;
		background-color: white;
		padding: 0 30upx;
	}
	
	.uni-badge-left-margin {
		margin-left: 10px;
		
	}
	.heijiView{
		background-color: rgb(0, 185, 250);
		width: 410upx;
		display: flex;
		height: 8vh;
		align-items: center;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
		padding-left: 100upx;
		
		
	}
	.xuanhaole{
		background-color: rgb(32, 116, 250);
		width: 180upx;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
		height: 8vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.quedingView{
		position: fixed;
		width: 630upx;
		bottom:0upx;
		height: 100upx;
		background-color: white;
		padding: 0 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btnView{
		padding: 6.5px 0 6.5px;
		background-image: linear-gradient(-34deg, #106bf3 0%, #00c0fa 100%);
		box-shadow: 1.5px 2px 15.5px #0d70f31a;
		border-radius: 5px;
		width: 99.5px;
		height: 23.5px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	
</style>
